<template>
  <div>
      <div class="topnav">
        <div class="nav-icon">
          <p>leiserver.com</p>
        </div>
        <div class="nav-container">
          <ul>
            <li>
              首页
            </li>
            <li>
              列表
            </li>
            <li>
              归档
            </li>
            <li>
              关于
            </li>
          </ul>
        </div>
<!--        <div class="search-container" >-->
<!--            <div >-->
<!--              <input type="text" v-model="name" placeholder="搜索.." name="search" style="display: table-cell" @change="search">-->
<!--            </div>-->
<!--        </div>-->
      </div>

    <el-drawer
      title="列表"
      :direction="direction"
      :with-header="false"
      :visible.sync="menuShow" size="300px">
        <div style="overflow: auto;">
          <div class="drop-menu-content">
            <note-menu @menuClick="menuClick"/>
          </div>
          <div class="user-content">
            <user/>
          </div>
        </div>
    </el-drawer>

    <el-drawer
      title="查询信息"
      :with-header="false"
      :visible.sync="searchShow" size="300px">
      <div class="block drop-menu drop-menu-color drop-menu-search" v-show="searchShow">
        <el-divider content-position="left">笔记本</el-divider>
        <ul>
          <li v-for="notebook in search_notebooks" :key="notebook.id">
            <a :href="'/content-note?notebook_id='+notebook.id">{{notebook.name}}</a>
          </li>
        </ul>
        <el-divider content-position="left">笔记</el-divider>
        <ul>
          <li v-for="note in search_notes" :key="note.id">
            <a :href="'content-reader?note_id='+note.id">{{note.name}}</a>
          </li>
        </ul>
        <el-divider content-position="left">标签</el-divider>
        <ul>
          <li v-for="label in search_lables" :key="label.id">
            <a href="/">{{label.name}}</a>
          </li>
        </ul>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import '../../assets/nav.css'

import request from '@/utils/request'
import noteMenu from '../menu/index'
import user from '../user/index'

export default {
  name: 'Nav',
  components: {
    noteMenu,
    user
  },
  data: function () {
    return {
      direction: 'ltr',
      menuShow: false,
      searchShow: false,
      menu: this.$store.state.menu,
      name: '',
      notePage: {
        size: 5,
        current: 1,
        total: 0
      },
      notebookPage: {
        size: 5,
        current: 1,
        total: 0
      },
      labelPage: {
        size: 5,
        current: 1,
        total: 0
      },
      page: {
        current: 1,
        size: 999,
        total: 0
      },
      search_notebooks: [],
      search_notes: [],
      search_lables: []
    }
  },
  watch: {
    menuShow: {
      handler: function (ms) {
        if (ms) {
          this.searchShow = false
        }
      },
      immediate: true
    },
    searchShow: {
      handler: function (ms) {
        if (ms) {
          this.menuShow = false
        }
      },
      immediate: true
    }
  },
  created: function () {
    this.initMenu()
  },
  methods: {
    initMenu: function () {
      if (this.menu && this.menu.length > 0) {
        return
      }
      request({
        url: '/notebook/notebook/query',
        method: 'post',
        data: this.page
      }).then(res => {
        if (res.result) {
          this.menu = res.data.data
          this.$store.state.menu = res.data.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    },
    menuClick: function (menu) {
      this.menuShow = !this.menuShow
      this.$emit('menuClick', menu)
    },
    search: function () {
      const name = this.name
      if (this.name && this.name.length > 0) {
        this.searchShow = true
        this.menuShow = false
        const conditions = [
          { 'field': 'name', 'symbol': 'LIKE', 'type': 'STRING', 'value': name }
        ]
        this.notebookPage.conditions = conditions
        this.notePage.conditions = conditions
        this.labelPage.conditions = conditions
        this.searchTask()
      }
    },
    searchTask: function () {
      request({
        url: '/notebook/index/search',
        method: 'post',
        data: {
          notebookPage: this.notebookPage,
          notePage: this.notePage,
          labelPage: this.labelPage
        }
      }).then(res => {
        if (res.result) {
          if (res.data) {
            const notebooks = res.data.notebooks
            const labels = res.data.labels
            const notes = res.data.notes
            if (notebooks.result) {
              this.search_notebooks = notebooks.data.data
            }
            if (labels.result) {
              this.search_lables = labels.data.data
            }
            if (notes.result) {
              this.search_notes = notes.data.data
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { console.log('done') })
    }
  }
}
</script>
